<template>
  <div class="">

    <div class="margin_top_20">
      <div class="row_item">选择行业</div>
      <Radio-group v-model="oneLevel" type="button" size="large">
        <Radio label="新闻"></Radio>
        <Radio label="社会"></Radio>
        <Radio label="军事"></Radio>
        <Radio label="科技"></Radio>
        <Radio label="体育"></Radio>
        <Radio label="娱乐"></Radio>
        <Radio label="健康"></Radio>
        <Radio label="教育"></Radio>
        <Radio label="+更多"></Radio>
      </Radio-group>
    </div>

    <div>

      <div class="float_left width_320px">
        <div id="my_favorite_latin_words" style="width:100%; margin: 0px auto; height: auto; border: 1px solid #ccc; "></div>
      </div>
      <div style="margin-left: 320px;">
        <chart :options="chartConfig" ></chart>
      </div>
      <div class="clear_both"></div>
    </div>

    <div class="margin_top_20">
      <Table :columns="columns1" :data="data1"></Table>
    </div>
  </div>
</template>

<script>
  import $ from "jquery"
  import chart from 'vue-echarts'

  export default {
    mounted:function(){
//      $("#qiutiContainer").windstagball({
//        selector:"#qiutiContainer",
//        radius:120,
//        speed:10
//      });

      var data = [
        ['广州', 13, 100],
        ['浙江', 10, 123],
        ['江苏', 9, 222],
        ['北京', 8, 111],
        ['上海', 7, 111],
        ['河南', 6, 111],
        ['河北', 5, 111],
        ['四川', 5, 111],
        ['安徽', 5, 111],
        ['湖北', 5, 111],
        ['福建', 4, 111],
        ['辽宁', 4, 111],
        ['湖南', 3, 111],
        ['陕西', 3, 111],
        ['广西', 3, 111],
        ['江西', 3, 111],
        ['重庆', 3, 111],
        ['天津', 3, 111],
        ['云南', 2, 111],
        ['山西', 2, 111],
        ['黑龙江', 2, 111],
        ['吉林', 2, 111],
        ['内蒙古', 2, 111],
        ['贵州', 2, 111],
        ['甘肃', 2, 111],
        ['海南', 2, 111],
        ['宁夏', 2, 111],
        ['青海', 1, 111],
        ['西藏', 1, 111],
        ['香港', 1, 111],
        ['未知', 1, 111],
        ['台湾', 1, 111]
      ];

      var string_ = "";
      for (var i = 0; i < data.length; i++) {
        var string_f = data[i][0];
        var string_n = data[i][1];
//        string_ += "{text: '" + string_f + "', weight: '" + string_n + "',html: {'class': 'span_list',onmouseover:'on_mouseover(this,event)',onmouseout:'on_mouseout()'}},";
        string_ += "{text: '" + string_f + "', weight: '" + string_n + "',html: {'class': 'span_list'}},";
      }

      var string_list = string_;
      var word_list = eval("[" + string_list + "]");

      console.dir(word_list)
      $("#my_favorite_latin_words").jQCloud(word_list);
    },
    data: function () {
      return {
        platform:"",
        twoLevel:"",
        oneLevel:"",
        filterLevel:"",
        chartConfig:{
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data:['销量']
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }]
        },
        columns1: [
          {
            title: '缩略图',
            key: 'img',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                }, '查看')
              ]);
            }
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data1: [
          {
            img: '../../../static/img/ewm_.png',
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居'
          },
          {
            img: '../../../static/img/ewm_.png',
            name: '张小刚',
            age: 25,
            address: '北京市海淀区西二旗',
          },
          {
            img: '../../../static/img/ewm_.png',
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道'
          },
          {
            img: '../../../static/img/ewm_.png',
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道'
          }
        ]
      }
    },
    // 引入插件
    components:{
      chart
    }

  }
</script>

<style>
  #qiutiContainer.qiuti-label {
    position: relative;
    width: 350px;
    height: 350px;
    border: 1px solid #000;
  }

  #qiutiContainer.qiuti-label a {
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: Microsoft YaHei;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    padding: 3px 6px;
  }

  #qiutiContainer.qiuti-label a:hover {
    border: 1px solid #eee;
    background: #FFF;
  }

  #qiutiContainer.qiuti-label .blue {
    color: blue;
  }

  #qiutiContainer.qiuti-label .red {
    color: red;
  }

  #qiutiContainer.qiuti-label .green {
    color: green;
  }



</style>
